<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>img-switch</title>
    <script src="js/vue.min.js"></script>
    <style type="text/css">
        .content {
            display: flex;
            width: 3840px;
            height: 1080px;

        }

        .left {

            margin-right: 20px;
        }

        .right {

            margin-left: 20px;
        }

        .content .img-item {
            width: 200px;
            height: 200px;
            margin-top: 10px;
        }

        .content .img-item img {
            width: 100%;
            height: 100%;
        }

        .center {
            flex: 2;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="content">
            <div class="left">
                <div class="img-item" v-for="(item,index) in imgLists" @click="selectImg(item)" v-if="index<3">
                    <img :src="item.imgSrc" />
                </div>
            </div>
            <div class="center">
                <!-- <div class="btnLeft" @click="switch(1)">《</div> -->
                <img :src="bigImg.imgSrc" />
                <!-- <div class="btnright" @click="switch('right')">》</div> -->
            </div>
            <div class="right">
                <div class="img-item" v-for="(item,index) in imgLists" @click="selectImg(item)" v-if="index>2">
                    <img :src="item.imgSrc" />
                </div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                bigImg: { id: 0, imgSrc: 'img/tu1.jpg' },
                imgLists: [
                    { id: 0, imgSrc: 'img/tu1.jpg' },
                    { id: 1, imgSrc: 'img/tu2.jpg' },
                    { id: 2, imgSrc: 'img/tu3.jpg' },
                    { id: 3, imgSrc: 'img/tu4.jpg' },
                    { id: 4, imgSrc: 'img/tu5.jpg' },
                    { id: 5, imgSrc: 'img/tu6.jpg' },
                ]
            },
            methods: {
                selectImg(val) {
                    this.bigImg = val
                },
                switch(type) {
                    let that = this
                    let num = that.bigImg.id
                    if (type === 'left') {
                        if (num == 0) {
                            num = 5

                        } else {
                            num--
                        }

                    } else {
                        if (num == 5) {
                            num = 0
                        } else {
                            num++
                        }
                    }
                    that.bigImg = that.imgLists[num]
                }
            },
        })
    </script>
</body>

</html>